<template>
<div id="manuChart" style="width: 600px;height:400px;"></div>
</template>

<script>
import { mapGetters } from 'vuex'
import { hotArticleList } from "../../api/content/article"

export default {
  name: 'Dashboard',
  data() {
return{
  xData:[],
  yData:[]
}
  },
  mounted() {
    this.getHotArticleList()
  },
  methods: {
    getHotArticleList() {
      hotArticleList().then((response) => {
        for(var i=0;i<response.length;i++){
          this.xData.push(response[i].viewCount)
          this.yData.push(response[i].title)

        }
        this.initEcharts()
      })
    },
    initEcharts(){
      const manuChart = this.$echarts.init(document.getElementById('manuChart'));
       // 指定图表的配置项和数据
       const option = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: 'value',
          min: 0,
          max:100,
          axisLabel : {
            show : false
          },
          splitLine : {
            show : false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick : {
            show : false
          },
          axisLine:{
            show : false
          },
          data:this.yData
        },
        series: [{
          name: '浏览量',
          type: 'bar',
          barWidth:40,
          data: this.xData,
          label: {
            show: true,
            formatter: '{c}', //显示数据带上百分比
            position: 'right'
          }
        }],
        grid: {
          x: 400,
          y: 50,
          x2: '10%',
          y2: 0
        },
      
      };

      manuChart.setOption(option)

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>

</style>
